<template>
  <div class="city top-page">
    <div class="search-city">
      <van-search v-model="searchValue" shape="round" show-action placeholder="城市/区域/位置" @cancel="cancelClick" />
      <van-tabs v-model:active="tabActive" line-height="3" color="#ff9854">
        <template v-for="(value, key, index) in allCities" :key="index">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>

    <div class="content">
      <template v-for="(value, key, index) in allCities" :key="index">
        <city-group v-show="tabActive === key" :group-data="value" />
      </template>

    </div>
  </div>
</template>

<script setup>

import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import useCityStore from '@/stores/modules/city.js'
import { storeToRefs } from 'pinia';
import cityGroup from './cpns/city-group.item.vue'

const router = useRouter()
const searchValue = ref('');
const tabActive = ref()


const cancelClick = () => {
  router.back()
}

const cityStore = useCityStore()
cityStore.fetchAllcitesData()
const { allCities } = storeToRefs(cityStore)

const currentGroup = computed(() => allCities.value[tabActive.value])

</script>

<style lang="less" scoped>
.content {
  height: calc(100vh - 196px);
  overflow-y: auto;
}
</style>